import React, { useEffect, useState } from 'react';
import { Button, Modal, Form } from 'antd';
import MyUpload from '../myUpload';

import { FormInstance } from 'rc-field-form';

type Imodal = {
    //组合的节点
    children?: React.ReactNode;
    //确认的回调
    onOk?: (formInstance?: FormInstance) => void;
    //取消的回调
    onCancel?: (formInstance?: FormInstance) => void;
    //标题
    title?: string;
    //控制modal的属性
    open?: boolean;
    //Form实例
    formInstance?: any
}
const MyModal: React.FC<Imodal> = (props) => {
    //解构props中的属性
    let { open, onOk, onCancel, title, formInstance } = props;
    //使用hook获取form实例
    // let [formInstance] = Form.useForm()
    //上传成功
    let handleUploadSuccess = (response: any) => {
        // console.log(response)
        formInstance!.setFieldValue('imageUrl', response.imgUrl)
    }
    //点击Modal的确认按钮
    const handleOk = () => {
        // setIsModalOpen(false);
        // console.log(formInstance)
        formInstance!.submit()//让表单进行校验

    };
    //点击Modal的取消按钮
    const handleCancel = () => {
        onCancel!(formInstance)
    };
    //表单验证通过
    const onFinish = (values: any) => {
        // console.log('Success:', values);
        //关闭模态框
        onOk!(formInstance)
    };
    //表单验证不通过
    const onFinishFailed = (errorInfo: any) => {
        // console.log('Failed:', errorInfo);
    };
    return (
        <>
            <Modal cancelText="取消" okText="确认" title={title ?? '提示'} open={open} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    form={formInstance}
                    name="add-product"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item label='产品图片' name="imageUrl" rules={[{ required: true, message: '请上传图片' }]}>
                        <MyUpload imageUrl='' formInstance={formInstance} done={handleUploadSuccess}></MyUpload>
                    </Form.Item>
                    {props.children}
                </Form>
            </Modal>
        </>
    );
};

export default MyModal